<template>
  <div class="container">
    <base-title base-title="标签列表" />
    <baseTable :total="labelTotal" :structure="labelSc" :data="labelData" btn-items="export" @current-page-change="handleCurrentPageChange">
      <template #operation="{ scope }">
        <el-button style="padding: 5px" type="success" :icon="Edit" text @click="editLabel(scope.row.id)">编辑</el-button>
        <el-button style="padding: 5px" type="danger" :icon="Delete" text @click="onDelete(scope.row.id)">删除</el-button>
      </template>
    </baseTable>

    <BaseDialog @confirm="onSubmitUpdate" v-model:visible="visible">
      <el-form :model="editLabelForm" :rules="rules" ref="labelRef">
        <el-form-item label="标签名称" prop="label_name">
          <el-input v-model="editLabelForm.label_name" autocomplete="off" />
        </el-form-item>
      </el-form>
    </BaseDialog>
  </div>
</template>

<script lang="ts" name="article_label" setup>
  import { ref, reactive, onBeforeMount } from 'vue'
  import { ElMessageBox, FormInstance, FormRules } from 'element-plus'
  import { Delete, Edit } from '@element-plus/icons-vue'
  import { labelSc } from '@/components/base-table/config'
  import { queryLabelsRequest, deleteLabelRequest, updateLabelNameRequest } from '@/network/api/label-api'
  import BaseDialog from '@/components/base-dialog/Index.vue'
  import baseTable from '@/components/base-table/baseTable.vue'
  import notification from '@/utils/notification'
  import formatUtcTime from '@/utils/formatTime'
  const labelData = ref([])
  const labelTotal = ref<number>(0)
  const editLabelForm = reactive({
    label_id: 0,
    label_name: '',
  })
  const rules = reactive<FormRules>({
    label_name: [
      { required: true, message: '标签名称为必填项~', trigger: 'blur' },
      { min: 2, max: 15, message: '标签长度在2-15个字符之间~', trigger: 'blur' },
    ],
  })
  const visible = ref<boolean>(false)
  const labelRef = ref<FormInstance>()

  const labelListPageInit = async (currentPage: number = 1) => {
    const result = await queryLabelsRequest(currentPage)
    labelData.value = result.result.data
    labelData.value.forEach((item: any) => {
      item.createAt = formatUtcTime(item.createAt)
      item.updateAt = formatUtcTime(item.updateAt)
    })
    labelTotal.value = result.result.total
  }

  onBeforeMount(async () => {
    await labelListPageInit()
  })

  const editLabel = (id: number) => {
    const currentLabel: any = labelData.value.find((item: any) => item.id === id)
    editLabelForm.label_id = currentLabel.id
    editLabelForm.label_name = currentLabel.label_name
    visible.value = true
  }

  const onDelete = async (id: number) => {
    const reslt = await ElMessageBox.confirm('确定删除吗？', 'Warning', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }).catch(err => err)
    if (reslt === 'cancel') {
      return notification.info('再想想~')
    } else if (reslt === 'confirm') {
      const result = await deleteLabelRequest(id)
      notification.success(result.msg)
      await labelListPageInit()
    }
  }

  const handleCurrentPageChange = async (currentPage: number) => {
    await labelListPageInit(currentPage)
  }

  const onSubmitUpdate = async () => {
    if (!labelRef.value) return
    await labelRef.value.validate(async valid => {
      if (valid) {
        const result = await updateLabelNameRequest(editLabelForm.label_id, editLabelForm.label_name)
        visible.value = false
        notification.success(result.msg)
        await labelListPageInit()
      } else {
        return
      }
    })
  }
</script>

<style scoped lang="less"></style>
